<template>
    <div class="platform-content">
        <h4 class="platform-content-title">
            <span>抄送消息</span>
            <div class="platform-list-op">
                <el-button
                        v-permission="'sqfw.copy.record.create'"
                        size="small"
                        type="primary"
                        @click="openCreate"
                >
                    新建
                </el-button>
                <el-button
                        size="mini"
                        type="success"
                        @click="changeSearch"
                >
                    收起/展开
                </el-button>
            </div>
        </h4>
        <div class="platform-content-info">
            <el-row>
                <el-form
                        ref="searchForm"
                        :inline="true"
                        :model="pageData"
                        class="platform-content-search-form-more"
                >
                    <el-row v-if="showSearch">
                                                <el-col :span="6">
                            <el-form-item label="服务id">
                                <el-input
                                        v-model="pageData.sqfwId"
                                        placeholder="服务id"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="操作人">
                                <el-input
                                        v-model="pageData.copyUserid"
                                        placeholder="操作人"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="抄送人">
                                <el-input
                                        v-model="pageData.toUserId"
                                        placeholder="抄送人"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="创建时间">
                                <el-input
                                        v-model="pageData.createDate"
                                        placeholder="创建时间"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="更新时间">
                                <el-input
                                        v-model="pageData.updateDate"
                                        placeholder="更新时间"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="修改人">
                                <el-input
                                        v-model="pageData.updateBy"
                                        placeholder="修改人"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="抄送的备注">
                                <el-input
                                        v-model="pageData.copyRemark"
                                        placeholder="抄送的备注"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="备注">
                                <el-input
                                        v-model="pageData.remark"
                                        placeholder="备注"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6">
                            <el-form-item label="是否已经阅读">
                                <el-input
                                        v-model="pageData.readFlag"
                                        placeholder="是否已经阅读"
                                        maxlength="255"
                                        auto-complete="off"
                                        type="text"
                                />
                            </el-form-item>
                        </el-col>
                                                <el-col :span="6" style="float:right;">
                            <div class="platform-content-search-op-more">
                                <el-button
                                        size="small"
                                        @click="doReSearch"
                                >
                                    重 置
                                </el-button>
                                <el-button
                                        size="small"
                                        type="primary"
                                        @click="doSearch"
                                >
                                    查 询
                                </el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
            <div class="platform-content-list">
                <div class="platform-content-list-table">
                    <el-table
                            v-loading="listLoading"
                            :data="listData"
                            stripe
                            @sort-change="doPageSort"
                    >
                                                    <el-table-column
                                    prop="sqfwId"
                                    label="服务id"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="copyUserid"
                                    label="操作人"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="toUserId"
                                    label="抄送人"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="createDate"
                                    label="创建时间"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="updateDate"
                                    label="更新时间"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="updateBy"
                                    label="修改人"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="copyRemark"
                                    label="抄送的备注"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="remark"
                                    label="备注"
                                    sortable
                            />
                                                    <el-table-column
                                    prop="readFlag"
                                    label="是否已经阅读"
                                    sortable
                            />
                                                <el-table-column
                                fixed="right"
                                header-align="center"
                                align="center"
                                label="操作"
                                width="180"
                        >
                            <template slot-scope="scope">
                                <el-button
                                        v-permission="'sqfw.copy.record'"
                                        type="text"
                                        size="small"
                                        @click.native.prevent="openShow(scope.row)"
                                >
                                    详情
                                </el-button>
                                <el-button
                                        v-permission="'sqfw.copy.record.update'"
                                        type="text"
                                        size="small"
                                        @click.native.prevent="openUpdate(scope.row)"
                                >
                                    修改
                                </el-button>
                                <el-button
                                        v-permission="'sqfw.copy.record.delete'"
                                        type="text"
                                        size="small"
                                        class="button-delete-color"
                                        @click.native.prevent="openDelete(scope.row)"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="platform-content-list-pagination">
                    <el-pagination
                            :current-page="pageData.pageNo"
                            :page-size="pageData.pageSize"
                            :total="pageData.totalCount"
                            class="platform-pagenation"
                            background
                            :page-sizes="[10, 20, 30, 50]"
                            layout="sizes, prev, pager, next"
                            @current-change="doChangePage"
                            @size-change="doSizeChange"
                    />
                </div>
            </div>
        </div>

        <el-dialog
                title="新建"
                :visible.sync="createDialogVisible"
                :close-on-click-modal="false"
                width="50%"
        >
            <el-form
                    ref="createForm"
                    :model="formData"
                    :rules="formRules"
                    size="small"
                    label-width="120px"
            >
                                    <el-form-item
                            prop="sqfwId"
                            label="服务id"
                    >
                        <el-input
                                v-model="formData.sqfwId"
                                maxlength="100"
                                placeholder="服务id"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="copyUserid"
                            label="操作人"
                    >
                        <el-input
                                v-model="formData.copyUserid"
                                maxlength="100"
                                placeholder="操作人"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="toUserId"
                            label="抄送人"
                    >
                        <el-input
                                v-model="formData.toUserId"
                                maxlength="100"
                                placeholder="抄送人"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="createDate"
                            label="创建时间"
                    >
                        <el-input
                                v-model="formData.createDate"
                                maxlength="100"
                                placeholder="创建时间"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="updateDate"
                            label="更新时间"
                    >
                        <el-input
                                v-model="formData.updateDate"
                                maxlength="100"
                                placeholder="更新时间"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="updateBy"
                            label="修改人"
                    >
                        <el-input
                                v-model="formData.updateBy"
                                maxlength="100"
                                placeholder="修改人"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="copyRemark"
                            label="抄送的备注"
                    >
                        <el-input
                                v-model="formData.copyRemark"
                                maxlength="100"
                                placeholder="抄送的备注"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="remark"
                            label="备注"
                    >
                        <el-input
                                v-model="formData.remark"
                                maxlength="100"
                                placeholder="备注"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="readFlag"
                            label="是否已经阅读"
                    >
                        <el-input
                                v-model="formData.readFlag"
                                maxlength="100"
                                placeholder="是否已经阅读"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="createDialogVisible = false">取 消</el-button>
        <el-button
                size="small"
                type="primary"
                :loading="btnLoading"
                @click="doCreate"
        >确 定</el-button>
      </span>
        </el-dialog>
        <el-dialog
                title="查看详情"
                :visible.sync="showDialogVisible"
                :close-on-click-modal="false"
                width="50%"
        >
            <el-descriptions class="margin-top" colon="false" direction="horizontal" :column="1" :size="size" border="false">
                                    <el-descriptions-item>
                        <template slot="label">
                            服务id
                        </template>
                        {{formData.sqfwId}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            操作人
                        </template>
                        {{formData.copyUserid}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            抄送人
                        </template>
                        {{formData.toUserId}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            创建时间
                        </template>
                        {{formData.createDate}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            更新时间
                        </template>
                        {{formData.updateDate}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            修改人
                        </template>
                        {{formData.updateBy}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            抄送的备注
                        </template>
                        {{formData.copyRemark}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            备注
                        </template>
                        {{formData.remark}}
                    </el-descriptions-item>
                                    <el-descriptions-item>
                        <template slot="label">
                            是否已经阅读
                        </template>
                        {{formData.readFlag}}
                    </el-descriptions-item>
                            </el-descriptions>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="showDialogVisible = false">关 闭</el-button>
      </span>
        </el-dialog>
        <el-dialog
                title="修改分类"
                :visible.sync="updateDialogVisible"
                :close-on-click-modal="false"
                width="50%"
        >
            <el-form
                    ref="updateForm"
                    :model="formData"
                    :rules="formRules"
                    size="small"
                    label-width="120px"
            >
                                    <el-form-item
                            prop="sqfwId"
                            label="服务id"
                    >
                        <el-input
                                v-model="formData.sqfwId"
                                maxlength="100"
                                placeholder="服务id"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="copyUserid"
                            label="操作人"
                    >
                        <el-input
                                v-model="formData.copyUserid"
                                maxlength="100"
                                placeholder="操作人"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="toUserId"
                            label="抄送人"
                    >
                        <el-input
                                v-model="formData.toUserId"
                                maxlength="100"
                                placeholder="抄送人"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="createDate"
                            label="创建时间"
                    >
                        <el-input
                                v-model="formData.createDate"
                                maxlength="100"
                                placeholder="创建时间"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="updateDate"
                            label="更新时间"
                    >
                        <el-input
                                v-model="formData.updateDate"
                                maxlength="100"
                                placeholder="更新时间"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="updateBy"
                            label="修改人"
                    >
                        <el-input
                                v-model="formData.updateBy"
                                maxlength="100"
                                placeholder="修改人"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="copyRemark"
                            label="抄送的备注"
                    >
                        <el-input
                                v-model="formData.copyRemark"
                                maxlength="100"
                                placeholder="抄送的备注"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="remark"
                            label="备注"
                    >
                        <el-input
                                v-model="formData.remark"
                                maxlength="100"
                                placeholder="备注"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                                    <el-form-item
                            prop="readFlag"
                            label="是否已经阅读"
                    >
                        <el-input
                                v-model="formData.readFlag"
                                maxlength="100"
                                placeholder="是否已经阅读"
                                auto-complete="off"
                                type="text"
                        />
                    </el-form-item>
                            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="updateDialogVisible = false">取 消</el-button>
        <el-button
                size="small"
                type="primary"
                :loading="btnLoading"
                @click="doUpdate"
        >确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        API_SQFW_COPY_RECORD_LIST,
        API_SQFW_COPY_RECORD_CREATE,
        API_SQFW_COPY_RECORD_DELETE,
        API_SQFW_COPY_RECORD_UPDATE,
        API_SQFW_COPY_RECORD_GET
    } from '@/constant/api/sqfw/copy/record'
    export default {
        middleware: ['authenticated', 'check_permissions'],
        data() {
            return {
                loading: true,
                btnLoading: false,
                listLoading: false,
                createDialogVisible: false,
                updateDialogVisible: false,
                showDialogVisible: false,
                showSearch: false,
                listData: [],
                pageData: {
                    pageNo: 1,
                    pageSize: 10,
                    totalCount: 0,
                    pageOrderName: 'createdAt',
                    pageOrderBy: 'descending'
                },
                formData: {
                },
                editData: {
                }
            }
        },
        computed: {
            // 表单验证,写在computed里切换多语言才会更新
            formRules() {
                const formRules = {
                                                sqfwId: [
                            {
                                required: false,
                                message: '服务id',
                                trigger: 'blur'
                            }
                        ],
                                                copyUserid: [
                            {
                                required: false,
                                message: '操作人',
                                trigger: 'blur'
                            }
                        ],
                                                toUserId: [
                            {
                                required: false,
                                message: '抄送人',
                                trigger: 'blur'
                            }
                        ],
                                                createDate: [
                            {
                                required: false,
                                message: '创建时间',
                                trigger: 'blur'
                            }
                        ],
                                                updateDate: [
                            {
                                required: false,
                                message: '更新时间',
                                trigger: 'blur'
                            }
                        ],
                                                updateBy: [
                            {
                                required: false,
                                message: '修改人',
                                trigger: 'blur'
                            }
                        ],
                                                copyRemark: [
                            {
                                required: false,
                                message: '抄送的备注',
                                trigger: 'blur'
                            }
                        ],
                                                remark: [
                            {
                                required: false,
                                message: '备注',
                                trigger: 'blur'
                            }
                        ],
                                                readFlag: [
                            {
                                required: false,
                                message: '是否已经阅读',
                                trigger: 'blur'
                            }
                        ],
                                    }
                return formRules
            }
        },


        created() {
            if (process.browser) {
                this.listPage()
            }
        },
        methods: {
            // 打开字新增窗口
            openCreate() {
                this.formData = {}
                this.createDialogVisible = true
            },
            // 提交表单
            doCreate() {
                this.$refs['createForm']
                        .validate( (valid) => {
                if (valid) {
                this.btnLoading = true
                this.$axios
                .$post(API_SQFW_COPY_RECORD_CREATE, this.formData)
                .then((d) => {
                this.btnLoading = false
                if (d.code === 0) {
                this.$message({
                message: d.msg,
                type: 'success'
                })
                this.createDialogVisible = false
                this.listPage()
                }
                })
                }
                })
            },
            // 打开修改窗口
            openUpdate(row) {
                this.editData.id = row.id
                this.$axios.$post(API_SQFW_COPY_RECORD_GET, this.editData).then((d) => {
                    if (d.code === 0) {
                        this.formData = d.data
                        this.updateDialogVisible = true
                    }
                })
            },
            // 打开详情窗口
            openShow(row) {
                this.editData.id = row.id
                this.$axios.$post(API_SQFW_COPY_RECORD_GET, this.editData).then((d) => {
                    if (d.code === 0) {
                        this.formData = d.data
                        this.showDialogVisible = true
                    }
                })
            },
            // 提交表单
            doUpdate() {
                this.$refs['updateForm']
                        .validate((valid) => {
                if (valid) {
                this.btnLoading = true
                this.$axios
                .$post(API_SQFW_COPY_RECORD_UPDATE, this.formData)
                .then((d) => {
                this.btnLoading = false
                if (d.code === 0) {
                this.$message({
                message: d.msg,
                type: 'success'
                })
                this.updateDialogVisible = false
                this.listPage()
                }
                })
                }
                })
            },
            // 执行删除
            openDelete(row) {
                this.editData.id = row.id
                this.$confirm(
                        '确定删除该条数据 ？',
                        '操作提示',
                        {
                            confirmButtonText: '确 定',
                            cancelButtonText: '取 消',
                            type: 'warning'
                        }
                ).then(() => {
                    this.btnLoading = true
                    this.$axios
                            .$post(API_SQFW_COPY_RECORD_DELETE, this.editData)
                            .then((res) => {
                                this.btnLoading = false
                                if (res.code === 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    })
                                    this.listPage()
                                }
                            })
                }).catch(() => {})
            },
            // 页码变动事件
            doChangePage(val) {
                this.pageData.pageNo = val
                this.listPage()
            },
            // 页大小变动事件
            doSizeChange(val) {
                this.pageData.pageSize = val
                this.listPage()
            },
            // 页排序事件
            doPageSort(column) {
                this.pageData.pageOrderName = column.prop
                this.pageData.pageOrderBy = column.order
                this.listPage()
            },
            // 获取分页查询数据
            listPage() {
                this.listLoading = true
                this.$axios.$post(API_SQFW_COPY_RECORD_LIST, this.pageData).then((res) => {
                    this.listLoading = false
                    if (res.code === 0) {
                        this.listData = res.data.list
                        this.pageData.totalCount = res.data.totalCount
                    }
                })
            },
            // 条件查询展示第一页内容
            doSearch() {
                this.pageData.pageNo = 1
                this.listPage()
            },
            doReSearch() {
                this.pageData = {
                    pageNo: 1,
                    pageSize: 10,
                    totalCount: 0,
                    pageOrderName: 'createdAt',
                    pageOrderBy: 'descending'
                }
                this.$refs['searchForm'].resetFields()
            },
            changeSearch() {
                this.showSearch = !this.showSearch
            }
        }
    }

</script>
